<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		/*	animation-name:动画名字 (必)
			animation-duration:动画时间 (必)
		    animation-iteration-count:播放次数 
		    	-n(n>=1) 
		    	-infinite无限播放
		    animation-timing-function:动画播放速度 
		    	-linear：匀速 
		    	-ease：默认 由快到慢再到快 
		    	-ease-in:以低速开始 
		    	-ease-out:以低速结束 
		    	-ease-in-out:以低速开始和低速结束
		    animation-delay:动画延迟播放
		    animation-direction:动画播放的方向 
		    	-revert倒放 
		    	-alternate正去反回
		    animation-fill-mode:动画不播放时的显示样式 
		    	-forwards最后一帧 
		    	-backwards第一帧	
		    animation-play-state:设置动画运行或暂停
		    	-paused暂停
		    	-running运行
		    				
		    综合写法： 
		    animation: gg 5s infinite linear 1s revert forwards;
		    注意:第一个时间是动画时间，第二个是延迟时间，有顺序要求;		
		    					*/
		div{
			width: 200px;
			height: 200px;
			background: red;
			/*animation-name: gg;
			animation-duration: 10s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-delay: 1s;
			animation-direction: alternate;
			animation-fill-mode: forwards;*/
			animation: gg 5s infinite linear 1s revert forwards;
		}
		div:hover{
			animation-play-state: paused;
		}
		/*	注册关键帧动画	@keyframes + 名字 */
		@keyframes gg {
			0%{
				width: 200px;
			}
			20%{
				width: 400px;
			}
			40%{
				width: 600px;
			}
			60%{
				background: pink;
			}
			80%{
				background: green;
			}
			100%{
				width: 200px;
				background: blue;
			}
		}
		@keyframes run{
			/*	0% 	*/
			from{
				width: 300px;
			}
			/*	100%	*/
			to{
				width: 600px;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>